<template>
  <div class="header">
    <div class="container">
      <div class="btn" @click="operate1(unfold1)">业主单位 服务采购方</div>
      <div
        :class="[
          'options',
          this.unfold1 && this.unfold1 === '1' ? 'unfold' : '',
        ]"
      >
        <primary></primary>
        <intermediate></intermediate>
        <senior></senior>
      </div>
      <div class="btn" @click="operate2(unfold2)">施工 服务提供商</div>
      <div
        :class="[
          'options',
          this.unfold2 && this.unfold2 === '1' ? 'unfold' : '',
        ]"
      >
        <primary></primary>
        <intermediate2></intermediate2>
        <senior></senior>
      </div>
      <div class="btn" @click="operate3(unfold3)">全过程咨询 服务提供商</div>
      <div
        :class="[
          'options',
          this.unfold3 && this.unfold3 === '1' ? 'unfold' : '',
        ]"
      >
        <primary></primary>
        <intermediate></intermediate>
        <senior></senior>
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
.header {
  .container {
    overflow: hidden;
    .options {
      transition: all 0.5s;
      display: none;
      margin-left: 20px;
    }
    .unfold {
      display: block;
    }
    .btn {
      font-size: 24px;
      color: #000;
      cursor: pointer;
      font-weight: bold;
      user-select: none;
    }
  }
}
</style>


<script>
import Intermediate from "./Intermediate.vue";
import Primary from "./Primary.vue";
import Intermediate2 from './Intermediate2.vue';
import Senior from "./Senior.vue";
export default {
  components: {
    Primary,
    Intermediate,
    Senior,
    Intermediate2,
  },
  name: "Select",
  data() {
    return {
      flag: "true",
      id: "",
      unfold1: "0",
      unfold2: "0",
      unfold3: "0",
      show: false,
      hover: "",
      section: false,
      over: false,
      activeIndex: "1",
    };
  },
  methods: {
    operate1(value1) {
      console.log(value1);
      if (value1 == "1") {
        this.unfold1 = "0";
      } else {
        this.unfold1 = "1";
      }
    },
    operate2(value2) {
      console.log(value2);
      if (value2 == "1") {
        this.unfold2 = "0";
      } else {
        this.unfold2 = "1";
      }
    },
    operate3(value3) {
      console.log(value3);
      if (value3 == "1") {
        this.unfold3 = "0";
      } else {
        this.unfold3 = "1";
      }
    },
    mouseOver() {
      this.section = true;
    },
    mouseLeave() {
      this.section = false;
    },
    myover() {
      this.over = true;
    },
    myleave() {
      this.over = false;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>